@value default-block-placeholder-color from 'canvas-editor/styles/theme';
@value default-dark-gray from 'canvas-editor/styles/theme';
@value default-editor-monospace-font-family from 'canvas-editor/styles/theme';
@value default-extra-light-gray from 'canvas-editor/styles/theme';

.canvas-block-editable {
  outline: none;
  position: relative;
  white-space: pre-wrap;

  :global {
    a {
      cursor: pointer;
    }

    /**
     * 1. Prevents ligatures from messing with the spacing around folded
     *    elements.
     */

    .md-folding {
      font-size: 0;
      text-rendering: optimizeSpeed; /* 1 */
    }

    .md-em {
      font-style: italic;
    }

    .md-inline-code {
      background: var(--extra-light-gray, default-extra-light-gray);
      color: var(--dark-gray, default-dark-gray);
      font-family: var(--editor-monospace-font-family, default-editor-monospace-font-family);
      font-size: 0.9375em;
    }

    .md-highlight {
      background: yellow;
    }

    .md-strikethrough-text {
      text-decoration: line-through;
    }

    /**
     * 1. Inline code in a Markdown link should be underlined.
     * 2. Auto-linked URLs in inline code should look the same as 1.
     */
    a .md-inline-code, /* 1 */
    .md-inline-code a { /* 2 */
      text-decoration: underline;
    }

    /**
     * 1. Auto-linked URLs in inline code should have the same color as regular
     *    inline code.
     */
    .md-inline-code a {
      color: inherit;
    }

    .md-strong {
      font-weight: 600;
    }
  }
}

.is-focused {
  :global {
    .md-folding {
      font-size: inherit;
    }
  }
}

.is-empty::after {
  color: var(--block-placeholder-color, default-block-placeholder-color);
  content: attr(data-placeholder);
  display: block;
  left: 0;
  position: absolute;
  top: 0;
}
